<template>
	<view>
		<view class="level_align flex_between tp-pd30 tp-bcblue" @click="pageBack">
			<view class="flex-1 flex flex_column tp-fz30 tp-fc333 tp-mr20">
				<view class="level_align tp-lh54">
					<text class="tp-mr10">出发地：</text><text class="tp-fw600">{{form.startCity || ''}}</text>
				</view>
				<view class="level_align tp-lh54">
					<text class="tp-mr10">目的地：</text><text class="tp-fw600 flex-1 ellispsis1" >{{form.endCitys || ''}}</text>
				</view>
			</view>
			<!-- <uni-icons type="arrowright" size="20" color="#999"></uni-icons> -->
		</view>
		<!-- 行程需求 S -->
		<view class="tp-mt20">
			<view class="tp-bgf tp-mb2 level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('./evaluateMore')">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>行程需求</text>
				</view>
			</view>
			<view class="tp-ptb0lr30 tp-bgf">
				<view class="level_align tp-bdbm tp-h98" @click="pageJumps('/pages/others/calendar?sts=go&durationDay=100800')">
					<text class="tp-fz30 tp-mr30">出行开始日期：</text>
					<view class="level_align flex-1 flex_end tp-fz28">
						<view class="tp-fc666" v-if="!choosedDateObj.go"> 请选择出行开始日期 </view>
						<view class="tp-fc333" v-else> {{choosedDateObj.go && choosedDateObj.go}} </view>
						<!-- <input type="text" class="tp-tr tp-mr20 flex-1 flex flex_end" disabled placeholder="" :value="choosedDateObj.go && choosedDateObj.go" /> -->
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<view class="level_align tp-bdbm tp-h98" @click="pageJumps('/pages/others/calendar?sts=back&durationDay=100800')">
					<text class="tp-fz30 tp-mr30">出行结束日期：</text>
					<view class="level_align flex-1 flex_end tp-fz28">
						<view class="tp-fc666" v-if="!choosedDateObj.back"> 请选择出行结束日期 </view>
						<view class="tp-fc333" v-else> {{choosedDateObj.back && choosedDateObj.back}} </view>
						<!-- <input type="text" class="tp-tr tp-mr20 flex-1  flex flex_end" disabled placeholder="请选择出行结束日期" :value="choosedDateObj.back && choosedDateObj.back" /> -->
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<view class="level_align tp-bdbm tp-h98" v-for="(item,index) in pollList" :key="index">
					<text class="tp-fz30 tp-mr30">{{item.name}}：</text>
					<view class="level_align flex-1">
						<input class="flex-1" type="text" disabled placeholder="请选择出行人数" value="" />
						<view class="level_align tp-ml20">
							<uni-icons @click="changeNum(index,false)" class="tp-mr20" type="minus" size="20" color="#00B4FF"></uni-icons>
							<text>{{item.num}}</text>
							<uni-icons @click="changeNum(index,true)" class="tp-ml20" type="plus-filled" size="20" color="#00B4FF"></uni-icons>
						</view>
					</view>
				</view>
				<view class="level_align  tp-h98">
					<text class="tp-fz30 tp-mr30">人均预算：</text>
					<view class="level_align flex-1 flex_end">
						<input type="number" placeholder="请输入人均预算(选填)" value="" v-model="form.yuSuan" />
					</view>
				</view>
			</view>
		</view>
		<!-- 行程需求 E -->
		
		<!-- 其他需求（选填） S -->
		<view class="tp-mt20">
			<view class="tp-bgf  level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('./evaluateMore')">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>其他需求（选填）</text>
				</view>
			</view>
			<view class="tp-bgf tp-ptb0lr30 tp-pb30">
				<view class="tp-border1 tp-br12">
					<textarea class="tp-pd20" value="" v-model="form.remark" placeholder="请输入其他的需求描述" />
				</view>
			</view>
		</view>
		<!-- 其他需求（选填） E -->

		<!-- 需要提供服务（选填） S -->
		<view class="tp-mt20" v-if="!isTeam">
			<view class="tp-bgf tp-mb2 level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('./evaluateMore')">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>需要提供服务（选填）</text>
				</view>
			</view>
			<view class="tp-ptb0lr30 tp-bgf tp-pb20 level_align flex_wrap" style="padding-right: 10rpx;">
				<view class="tp-ptb0lr20 tp-lh44  tp-br8 tp-dib tp-mt20 tp-mr20" :class="checkArr.find(element => element == item.id) != undefined ? 'tp-bc tp-fcF' : 'tp-bcF5'"
				 @click="checkThis(item)" v-for="(item,index) in list" :key="index">
					{{item.value}}
				</view>
			</view>
		</view>
		<!-- 需要提供服务（选填） E -->
		
		<!-- 定制主题（选填） S -->
		<view class="tp-mt20" v-if="isTeam">
			<view class="tp-bgf tp-mb2 level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('./evaluateMore')">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>定制主题（选填）</text>
				</view>
			</view>
			<view class="tp-ptb0lr30 tp-bgf tp-pb20 level_align flex_wrap" style="padding-right: 10rpx;">
				<view class="tp-ptb0lr20 tp-lh44  tp-br8 tp-dib tp-mt20 tp-mr20" :class="checkArr.find(element => element == item.id) != undefined ? 'tp-bc tp-fcF' : 'tp-bcF5'"
				 @click="checkThis(item)" v-for="(item,index) in list" :key="index">
					{{item.value}}
				</view>
			</view>
		</view>
		<!-- 定制主题（选填） E -->

		

		<!-- 联系信息 S -->
		<view class="tp-mt20">
			<view class="tp-bgf  level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('./evaluateMore')">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>联系信息</text>
				</view>
			</view>
			<view class="tp-bgf tp-ptb0lr30">
				<view class="level_align tp-bdbm tp-h98 tp-fz30 ">
					<text class="tp-mr20"><text class="tp-mr20">姓 </text><text class="tp-mr40"></text> 名：</text>
					<view class="level_align flex-1 flex_end">
						<input type="text" placeholder="请填写姓名" value="" v-model="form.name" />
					</view>
				</view>
				<view class="level_align tp-bdbm tp-h98 tp-fz30">
					<text class=" tp-mr20">联系电话：</text>
					<view class="level_align flex-1 flex_end">
						<input type="number" placeholder="请填写联系电话" value="" maxlength="11" v-model="form.phone" />
					</view>
				</view>
				<view v-if="isTeam" class="level_align tp-bdbm tp-h98 tp-fz30">
					<text class=" tp-mr20">团建名称：</text>
					<view class="level_align flex-1 flex_end">
						<input type="text" placeholder="请填写团建名称" value="" v-model="form.teamName" />
					</view>
				</view>
				<view class="level_align  tp-h98 tp-fz30">
					<text class="tp-mr20"><text class="tp-mr20">邮 </text><text class="tp-mr40"></text> 箱：</text>
					<view class="level_align flex-1 flex_end">
						<input type="text" placeholder="请填写邮箱" v-model="form.email"  value="" />
					</view>
				</view>
			</view>
		</view>
		<!-- 联系信息 E -->

		<view @click="handSubmit" class="tp-w686 tp-h88 center_combo tp-ls4 tp-fcF tp-br12 tp-fz30 tp-mt80" style="background: #FFAF3C;">
			提交
		</view>
		<view class="tp-h98 tp-mt20"> </view>
	</view>
</template>

<script>
	import calendar from '@/components/tp-calendar/util.js'
	export default {
		data() {
			return {
				isTeam: true, // true 团队  false 个人
				adultNum: 0, // 成年人数量
				childrenNum: 0, // 儿童数量
				list: [],
				checkArr: [],
				pollList: [{
					name: '出行人数',
					num: 0,
				}],
				choosedMakeCity: {}, // 选择的城市
				choosedDateObj: {}, // 出行时间
				
				form: { // 提交数据
					startCity: ''  , // 出发地
					endCitys: '', //  目的地
					startTime: '', //  	出行开始日期
					outTime: '', //  出行结束日期
					travelDay: '', //  天数
					memberNum: '', //  人数
					yuSuan: '', //  预算
					serverValue: '', //  提供的服务
					remark: '', //  备注
					phone: '', //  手机号
					name: '', //  姓名
					email: '', //  邮箱
					applyType: '', //  	PERSON 个人,TEAM 团建
					teamName: '', //  	团建名称
				}
			};
		},
		onLoad(opt) {
			this.isTeam = opt.isTeam && JSON.parse(opt.isTeam)
			if(this.isTeam){  
				this.form.applyType = 'TEAM'
				this.getDictData(505) // 505:定制游团建定制主题
			}else {  
				this.form.applyType = 'PERSON'
				this.getDictData(504)  // 504: 定制游个人服务
			}
			this.$store.commit('delHomeChoosedDateObj')
			console.log(this.isTeam);
		},
		onShow() {
			this.choosedMakeCity = this.$store.getters.getChoosedMakeCity
			this.form.startCity = this.choosedMakeCity.goCity
			this.form.endCitys = this.choosedMakeCity.backCity.join('、')
			this.updateChoosedDate();
		},
		methods: {
			// 提交
			handSubmit(){
				let {
					startCity,endCitys,startTime,outTime,travelDay,phone,name,applyType,email
				} = this.form
				if(!startCity) return uni.showToast({
					title: '请重新选择出发地',
					icon: 'none'
				})
				if(!endCitys) return uni.showToast({
					title: '请重新选择目的地',
					icon: 'none'
				})
				if(!startTime) return uni.showToast({
					title: '请选择出行开始日期',
					icon: 'none'
				})
				if(!outTime) return uni.showToast({
					title: '请选择出行结束日期',
					icon: 'none'
				})
				if(!name) return uni.showToast({
					title: '请填写联系人姓名',
					icon: 'none'
				})
				if(!phone) return uni.showToast({
					title: '请填写手机号',
					icon: 'none'
				})
				if(!this.$regexPhone.test(phone)) return uni.showToast({
					title: '请检查手机号是否正确',
					icon: 'none'
				})
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if(email && !reg.test(email)) return uni.showToast({
					title: '请检查邮箱是否正确',
					icon: 'none'
				})
				uni.showToast({
					title: '提交中..',
					mask: true,
					icon: 'loading'
				})
				this.$http.post(this.$api.travelApply, this.form).then(res => {
					uni.hideLoading()
					if(res.code == 200){
						// this.orderId = res.data.orderId
						uni.showToast({
							title: '提交成功',
							mask: true,
							icon: 'none'
						})
						this.$store.commit('delChoosedMakeCity')
						setTimeout(() => {
							uni.redirectTo({
								url: '/pagesUser/order/makeOrderDetail?id=' + res.data.orderId
							});
						},600)
					}
				})
			},
			// 各种下拉选项设置 504: 定制游个人服务 505:定制游团建定制主题
			getDictData(type) {
				this.$http.get(this.$api.dictData + '?type=' + type).then(res => {
					if (res.code === 200) {
						this.list = res.data
					}
				})
			},
			// 计算天数
			computedSeveralDays() {
				let startDay = calendar.transdate(this.choosedDateObj.go_full)
				let endDay = calendar.transdate((this.choosedDateObj.back_full && this.choosedDateObj.back_full))
				this.form.travelDay = (endDay - startDay) / 60 / 60 / 24 + 1
			},
			// 获取选择的时间
			updateChoosedDate() {
				this.choosedDateObj = this.$store.getters.getHomeChoosedDateObj;
				let obj = this.$store.getters.getHomeChoosedDateObj;
				this.form.startTime = obj.go_full
				this.form.outTime = obj.back_full
				this.$set(this.choosedDateObj, 'go', obj.go);
				this.$set(this.choosedDateObj, 'back', obj.back);
				if(this.form.startTime){
					this.computedSeveralDays()
				}
			},
			// 人数 加减
			changeNum(index, add) {
				if (add) { // 加
					this.pollList[index].num =  this.pollList[index].num+1
				} else { // 减
					if (this.pollList[index].num >= 1) {
						this.pollList[index].num = this.pollList[index].num - 1
					} else {
						uni.showToast({
							title: '不能小于0',
							icon: 'none'
						})
					}
				}
				this.form.memberNum = this.pollList[index].num
			},
			// 系统消息的多选
			checkThis(item) {
				let is_have = this.checkArr.indexOf(item.id);
				console.log(is_have);
				if (is_have == -1) {
					this.checkArr.push(item.id);
				} else {
					this.checkArr.splice(is_have, 1);
				}
				this.form.serverValue = this.checkArr.join(',')
			},
		}
	}
</script>

<style lang="scss">

</style>
